import React from 'react';
import { Card, Button, Radio, Icon } from 'antd';

const RadioGroup = Radio.Group;
const ButtonGroup = Button.Group;

export default class Buttons extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      size: 'default'
    }
  }

  handleCloseLoading() {
    this.setState({
      loading: !this.state.loading
    })
  }

  handleRadioChange(e) {
    this.setState({
      size: e.target.value
    })
  }

  render() {
    return (
      <div>
        <Card title="基本按钮">
          <Button type="primary">Primary</Button>
          <Button>Default</Button>
          <Button type="dashed">Dashed</Button>
          <Button type="danger">Danger</Button>
        </Card>
        <Card title="图标按钮">
          <Button type="primary" icon="">添加</Button>
          <Button icon="delete">delete</Button>
          <Button shape="circle" icon="search"></Button>
        </Card>
        <Card title="loading按钮">
          <Button type="primary" loading={this.state.loading}>确定</Button>
          <Button onClick={e => this.handleCloseLoading()}>关闭</Button>
        </Card>
        <Card title="按钮尺寸">
          <RadioGroup onChange={e => this.handleRadioChange(e)} value={this.state.size}>
            <Radio value="small">小</Radio>
            <Radio value="default">中</Radio> 
            <Radio value="large">大</Radio>
          </RadioGroup>
          <Button type="primary" loading={this.state.loading} size={this.state.size}>确定</Button>
          <Button type="default" shape="circle" icon="search" size={this.state.size}></Button>
          <Button type="default" icon="download" size={this.state.size}>下载</Button>
          <Button loading={true} size={this.state.size}>确认</Button>
        </Card>
        <Card title="按钮组">
          <ButtonGroup>
            <Button><Icon type="left"/>上一页</Button><Button>下一页<Icon type="right"/></Button>
          </ButtonGroup>
        </Card>
      </div>
    );
  }
}